<template>
	<view class="page-container">
		<view class="detail-container">
			<view class="detail-item">
				<view class="clearfix padded-t-5">
					<view class="pull-left">
						<image src="/static/product/jiaotong.png" mode="widthFix" style="width: 18px; vertical-align: text-top;" class="margin-r-5"></image>
						<text class="font-16">{{ fkjg }}</text>
					</view>
					<view class="pull-right">
						<view class="manage-button" @click="clickJumpgl(id)">
							管理
						</view>
					</view>
				</view>
				<view class="padded-t-10">
					<text class="font-18 font-weight-bold color-2C3340">{{ cpname }}</text>
				</view>
				<view class="clearfix padded-t-10 padded-b-5">
					<view class="pull-left">
						<text>年化利率：{{ nhll }}%</text>
					</view>
					<view class="pull-right">
						<text>总期数：{{ hkqs }}期</text>
					</view>
				</view>
			</view>
			<view @click="lowrate(nhll,dklx)" class="padded-t-15 padded-l-15 padded-b-10">
				<text class="color-3679FF">发现{{ dll }}款金融产品利率更低！点击查看</text>
			</view>
			<view class="detail-item">
				<view class="clearfix font-weight-bold">
					<view class="pull-left">本期账单</view>
					<view class="pull-right">{{ benqi.ze }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">剩余应还</view>
					<view class="pull-right">{{ benqi.ze }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">本金</view>
					<view class="pull-right">{{ benqi.bj }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">利息</view>
					<view class="pull-right">{{ benqi.lx }} 元</view>
				</view>
				<hr class="divider margin-t-15">
				<view class="clearfix padded-t-15 color-7F7F7F">
					<view class="pull-left">到期还款日</view>
					<view class="pull-right">{{ benqi.date }}</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">全部待还</view>
					<view class="pull-right">{{ ze }} 元</view>
				</view>
				<view class="clearfix padded-t-5 color-7F7F7F">
					<view class="pull-left">剩余期数</view>
					<view class="pull-right">{{ yhqs }}/{{ hkqs }} 期</view>
				</view>
				<view v-if="benqi.type == 1" class="product-button margin-t-15" @click="djhk(benqi.q)">
					点击还款
				</view>
				<view v-if="benqi.type == 2" class="color-7F7F7F product-button margin-t-15" @click="djhk(benqi.q)">
					本期已还
				</view>
			</view>
			<view v-if="dataArray.length > 0" class="detail-item margin-t-15">
				<view class="clearfix">
					<view class="pull-left">
						<text class="font-16">还款计划</text>
					</view>
					<view class="pull-right">
						<image src="/static/product/sort.png" mode="widthFix" style="width: 15px; vertical-align: text-top;" class="margin-r-5"></image>
						<text class="color-B1B8C7">正序/倒序</text>
					</view>
				</view>
				<view class="padded-t-15">
					<timeAxis :dataArray="dataArray"></timeAxis>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import timeAxis from '@/components/time_axis/time_axis.vue'
	export default {
		onLoad(options) {
			const id = options.id;
			if (id) {
			    const decodedId = decodeURIComponent(id);
			    if (decodedId) {
					this.id = id;
					this.getbd(id);
			    }
			}
		},
		components:{
			timeAxis
		},
		data() {
			return {
				id: '', 
				fkjg:'',
				cpname:'',
				hkqs:'0',
				yhqs:'0',
				nhll:'0',
				dklx: 1,
				benqi:[],
				ze:'0',
				dll: 0,
				dataArray: [
					{
						time: '第1期',
						title: '本金￥16213.29（利息￥1000）',
						content: '还款日期2024-12-12',
						active: true
					},
					{
						time: '第2期',
						title: '本金￥16294.36（利息￥918.93）',
						content: '还款日期2025-01-12',
						active: true
					},
					{
						time: '第3期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-02-12',
						active: true
					},
					{
						time: '第4期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-03-12',
						active: true
					},
					{
						time: '第5期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-04-12',
						active: true
					},
					{
						time: '第6期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-05-12',
						active: false
					},
					{
						time: '第7期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-06-12',
						active: false
					},
					{
						time: '第8期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-07-12',
						active: false
					},
					{
						time: '第9期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-08-12',
						active: false
					},
					{
						time: '第10期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-09-12',
						active: false
					},
					{
						time: '第11期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-10-12',
						active: false
					},
					{
						time: '第12期',
						title: '本金￥16375.83（利息￥837.46）',
						content: '还款日期2025-11-12',
						active: false
					},
				]
			}
		},
		onReady() {
			
		},
		methods: {
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
			},
			getbd(id) {
				uni.request({
					url: 'https://wn.wdyky.com/index/jrgl/jrcpxq', 
					method: 'GET',
					data: {
						id: id,
					},
					success: (res) => {
						if(res.data.code == 1){ 
							this.dataArray = res.data.data.hkjhs;
							this.fkjg = res.data.data.fkjgt;
							this.cpname = res.data.data.cpname;
							this.nhll = res.data.data.nhll;
							this.dklx = res.data.data.dklx;
							this.type = res.data.data.type;
							this.hkqs = res.data.data.hkqs;
							this.yhqs = res.data.data.yhqs;
							this.benqi = res.data.data.benqi;
							this.ze = res.data.data.ze;
							this.dll = res.data.data.dll;
						}
						//console.log('GET请求成功：', res.data);
					},
					fail: (err) => {
						console.error('GET请求失败：', err);
					}
				});
			},
			djhk(q){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/qrhk', // 请求地址
				    data: {
				    	id: this.id,
						q: q,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        //console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.getbd(this.id);
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			clickJumpgl(id){
				uni.navigateTo({
				    url: '/pages/product/manage?id='+id
				});
			},
			lowrate(nhll,dklx){
				console.log('请求成功:', nhll);
				uni.navigateTo({
				    url: '/pages/product/lowrate?nhll='+nhll+'&dklx='+dklx
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
</style>
